<!--
 * @Author: 15801208559 1593215788@qq.com
 * @Date: 2023-12-19 12:29:47
 * @LastEditors: gn
 * @LastEditTime: 2023-12-20 11:11:52
 * @FilePath: \dm-gpt-survery\chatgpt-web\src\views\chat\dm-GPT-scene\Scene\component\SceneItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <n-card class="card-item" hoverable @click="clickScene(sceneData)">
    <n-space justify="start" class="Tt-avatar">
      <n-avatar class="avatar" round size="small" src="/favicon.svg" />
      <n-performant-ellipsis class="Tt" style="font-size: 16px">
        {{ sceneData?.tt }}
      </n-performant-ellipsis>
      <n-performant-ellipsis style="max-width: 240px">
        {{ sceneData?.msg }}
      </n-performant-ellipsis>
    </n-space>
  </n-card>
</template>


<script setup lang="ts">
import { NCard, NAvatar, NSpace, NPerformantEllipsis } from 'naive-ui'
import { inject, PropType } from "vue";

type SceneSelectorFunction = (val: Chat.sceneDataType | undefined) => any;

const useProps = defineProps({
  sceneData: Object as PropType<Chat.sceneDataType>,
});

const { sceneData } = useProps

const injectsSecneSelect: SceneSelectorFunction | undefined = inject("secneSelect")


function clickScene(val: Chat.sceneDataType | undefined) {
  injectsSecneSelect && injectsSecneSelect(val)
}

</script>

<style scoped lang="less">
@import url(../style/scene-item.less);
</style>